<template>
	<view class="zh-order">
		<view class="tabs display-flex justify-center">
			<view class="item display-flex align-center" :class="{'active':activeIndex === 0}" @click="tagsChange(0)">
				<text>交易订单</text>
				<u-tags value="5" class="item-tag"></u-tags>
			</view>
			<view class="item display-flex align-center" :class="{'active':activeIndex === 1}" @click="tagsChange(1)">
				<text>仓储业务</text>
				<u-tags value="5" class="item-tag"></u-tags>
			</view>
		</view>
		<view class="list">
			<navigator class="item" url="/pages/order/purchase/index">
				<view class="top display-flex justify-between align-center">
					<text class="font-bold font-30">采购订单</text>
					<image src="@/static/icons/right_arrow.png" class="right-arrow"/>
				</view>
				<view class="bottom display-flex justify-between align-center">
					<text class="font-24">订单X2206060002已生效</text>
					<text class="font-24 font-999">2022-7-12 15:00</text>
				</view>
			</navigator>
			<navigator class="item" url="/pages/order/purchase/index">
				<view class="top display-flex justify-between align-center">
					<text class="font-bold font-30">采购订单</text>
					<image src="@/static/icons/right_arrow.png" class="right-arrow"/>
				</view>
				<view class="bottom display-flex justify-between align-center">
					<text class="font-24">订单X2206060002已生效</text>
					<text class="font-24 font-999">2022-7-12 15:00</text>
				</view>
			</navigator>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	
	const activeIndex = ref(0)
	const tagsChange = (index:number) => {
		activeIndex.value = index
	}
</script>

<style lang="scss" scoped>
	.zh-order {
		.tabs {
			height:115rpx;
			background-color: $uni-bg-card-color;
			.item {
				padding:44rpx 50rpx 42rpx;
				box-sizing: border-box;
				
				&-tag {
					width:34rpx;
					height: 34rpx;
					color:#fff;
					background-color: #EC1010;
					border-radius: 17rpx;
					font-size: 24rpx;
					margin-left: 5rpx;
				}
				&.active {
					box-sizing: border-box;
					border-bottom:4rpx solid $uni-text-color-light-black;
				}
			}
		}
		.list {
			margin-top: 20rpx;
			background-color: $uni-bg-card-color;
			.item:nth-child(n + 2) {
				border-top:1rpx solid $uni-border-color;
			}
			.item {
				padding:30rpx 0 30rpx 30rpx;
				margin: 0 30rpx;
				position: relative;
				display:block;
				&::before {
					content:'•';
					position: absolute;
					color:#EC1010;
					left:10rpx;
					width: 10rpx;
					font-size:30rpx;
				}
				.top {
					.right-arrow {
						width:12rpx;
						height: 22rpx;
					}
				}
				.bottom {
					margin-top: 30rpx;
				}
			}
		}
	}
</style>
